<template>
  <div>
    <div class="dialogPop addOpenTime">
      <el-dialog :visible.sync="addData.dialogAdd" :before-close="handleClose">
        <p class="dialog-title">修改开放时间</p>
        <el-form :model="addData"  ref="addData" label-width="70px">
            <div v-for="(site,index) in addData.addOpenTime" class="areaBoxcon" :key="index">
                <p class="time-title">开放时间段{{index+1}}</p>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="开放时间" :prop="'addOpenTime.' + index + '.startTime'"> 
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.startTime"
                                :picker-options="{
                                     selectableRange: getStartRangeStart(site, index)+' - '+getStartRangeEnd(site, index)
                                }"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="2" style="position:relative">
                        <el-form-item label="结束时间" :prop="'addOpenTime.' + index + '.endTime'">
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.endTime"
                                :picker-options="{
                                   selectableRange: getEndRangeStart(site, index)+' - '+getEndRangeEnd(site, index)
                                }"
                                placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                        <span class="del-btn" @click="delContinue(index)" v-if="index!==0"> 
                            <i class="el-icon-delete"></i>
                        </span>
                    </el-col>
               </el-row>
            </div>
            <!-- 三个时间段时没有该按钮 -->
            <span v-if="addData.addOpenTime.length<3" @click="addContinue" class="addBtn">
                <i class="el-icon-plus"></i> 继续添加时间段
            </span>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="resetFormdelDialogAdd('addData')">取 消</el-button>
            <el-button type="primary" @click="addInfor('addData')" :loading="loadingBtn">确 认</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {updateOpenTime, updateOpenTimeBatch} from 'api/deviceManagement';
import moment from 'moment';
export default {
    props: {
        addData: {
            default() {
                return {
                    dialogAdd: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        return {
            list: [], // 传给后台的时间段数组
            loadingBtn: false // 弹窗的确定按钮状态
        }
    },
    created() {
        // //console.log(moment('2017-10-10 00:00').format('HH:mm:ss'))
    },
    methods: {
        // 继续添加
        addContinue() {
            if (this.addData.addOpenTime.length<3) {// 最多三个时间段
                let addTime = {
                    startTime: '',
                    endTime: ''
                }
                this.addData.addOpenTime.push(addTime);
            }    
        },
        // 删除按钮
        delContinue(index) {
            this.$confirm('确定删除该时间段？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.addData.addOpenTime.splice(index, 1);
            });
        },
        // 确定修改时间段按钮
        addInfor(addData) {
            this.$refs[addData].validate((valid) => {
                if (valid) {// 验证通过
                    this.jdgde();
                    if (this.jdgde()===true) {
                        // this.updateOpenTime();
                        let len=this.addData.addOpenTime.length;
                        let time=this.addData.addOpenTime;
                        let isSetOneTimeNull='1';// 清空第一时间段
                        // 全部空的时候的提示 
                        if (len==1) {
                            if (!time[0].startTime&&!time[0].endTime) {// 第一时间段是空时
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            } else {
                                isSetOneTimeNull='0';
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            }
                        }
                        if (len==2) {
                            if ((!time[0].startTime&&!time[0].endTime)&&(!time[1].startTime&&!time[1].endTime)) {
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            } else {
                                isSetOneTimeNull='0';
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            }
                        }
                        if (len==3) {
                            if ((!time[0].startTime&&!time[0].endTime)&&(!time[1].startTime&&!time[1].endTime)&&(!time[2].startTime&&!time[2].endTime)) {
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            } else {
                                isSetOneTimeNull='0';
                                this.isSetOneTimeNull(isSetOneTimeNull);
                            }
                        }
                    }
                } 
            });
        },
          // 是不是清空第一时间段的操作
        isSetOneTimeNull(isSetOneTimeNull) {
            let confirm=isSetOneTimeNull=='1'?'修改后将设置为默认时间段,是否确认修改？':'是否确认修改？';
            this.$confirm(confirm, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.updateOpenTime();
            }).catch(() => {
                this.$message.info('已取消操作')
            });
        },
        // 点击确定修改。判断当前几个时间段。push到数组，传参过去
        jdgde() {
            this.list=[];
            let time=this.addData.addOpenTime;
            let len=this.addData.addOpenTime.length;
            if (len==1) {
                this.funTimeOne(time);
                if (this.funTimeOne(time)==true) {
                    // 第一时间段有值，push，都空，传默认
                    if (time[0].startTime&&time[0].endTime) {
                        time.forEach((val, index) => {
                            if (val.startTime&&val.endTime) {
                                let startTime=moment(val.startTime).format('HH:mm')+':00';
                                let endTime=moment(val.endTime).format('HH:mm')+':00';
                                this.list.push({startTime, endTime})
                            }
                        })
                    }
                    if (!time[0].startTime&&!time[0].endTime) {
                        this.list.push({startTime: '08:00:00', endTime: '18:00:00'})
                    }
                    return true
                }
            }
            if (len==2) {
                this.funTimeTwo(time);
                if (this.funTimeTwo(time)==true) {
                    if ((!time[0].startTime&&!time[0].endTime)&&(!time[1].startTime&&!time[1].endTime)) {
                        this.list.push({startTime: '08:00:00', endTime: '18:00:00'})
                    } else {
                        time.forEach((val, index) => {
                            if (val.startTime&&val.endTime) {
                                let startTime=moment(val.startTime).format('HH:mm')+':00';
                                let endTime=moment(val.endTime).format('HH:mm')+':00';
                                this.list.push({startTime, endTime})
                            }
                        })
                    }
                    return true
                }
            }
            if (len==3) {
                this.funTimeThree(time);
                if (this.funTimeThree(time)==true) {
                    if ((!time[0].startTime&&!time[0].endTime)&&(!time[1].startTime&&!time[1].endTime)&&(!time[2].startTime&&!time[2].endTime)) {
                        this.list.push({startTime: '08:00:00', endTime: '18:00:00'})
                    } else {
                        time.forEach((val, index) => {
                            if (val.startTime&&val.endTime) {
                                let startTime=moment(val.startTime).format('HH:mm')+':00';
                                let endTime=moment(val.endTime).format('HH:mm')+':00';
                                this.list.push({startTime, endTime})
                            }
                        })
                    }
                    return true
                }
            }
        },
        updateOpenTime() {
            this.loadingBtn=true;
            let pId=this.addData.pId; // 时间段记录id，没有则为空
            let fClassId=this.addData.fClassId; // 班级id（教学区域）或学校id（公共区域）
            let openStartTimeFirst=this.list[0].startTime;// 第一时段开始
            let openEndTimeFirst=this.list[0].endTime; // 第一时段结束
            let openStartTimeSecond=this.list[1]?this.list[1].startTime:'';// 2的开始
            let openEndTimeSecond=this.list[1]?this.list[1].endTime:'';// 2的结束
            let openStartTimeThird=this.list[2]?this.list[2].startTime:'';// 3的开始
            let openEndTimeThird=this.list[2]?this.list[2].endTime:'';// 3的结束
            if (this.addData.isSingleOrBeath=='2') {// 批量修改
                let classIds=this.addData.classIds
                let liveDeviceRule={
                    openStartTimeFirst,
                    openEndTimeFirst,
                    openStartTimeSecond,
                    openEndTimeSecond,
                    openStartTimeThird,
                    openEndTimeThird
                }
                updateOpenTimeBatch(classIds, liveDeviceRule).then(res => {
                    this.loadingBtn=false;
                    this.addData.dialogAdd=false;
                    this.$emit('search', '');
                    this.$message.success('批量修改成功!');
                }).catch(() => {
                    this.loadingBtn=false;
                });   
            }
            if (this.addData.isSingleOrBeath=='1') {// 单个开放
                updateOpenTime(
                            pId, // 时间段记录id，没有则为空
                            fClassId, // 班级id（教学区域）或学校id（公共区域）
                            openStartTimeFirst, // 第一时段开始
                            openEndTimeFirst, // 第一时段结束
                            openStartTimeSecond,
                            openEndTimeSecond,
                            openStartTimeThird,
                            openEndTimeThird
                        ).then(res => {
                            this.loadingBtn=false;
                            this.addData.dialogAdd=false;
                            this.$emit('search', '');
                            this.$message.success('修改成功!');
                        }).catch(() => {
                            this.loadingBtn=false;
                        });   
            }
        },
        getStartRangeStart(site, index) {
            let time=this.addData.addOpenTime;
            if (index==0) {
                return '00:00:00'
            } 
            if (index==1) {
                return moment(time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getStartRangeEnd(site, index) {
            let time=this.addData.addOpenTime
            if (index==0) {
                return moment(time[0].endTime || (time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            } 
            if (index==1) {
                return moment(time[1].endTime || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return moment(time[2].endTime || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeStart(site, index) {
            let time=this.addData.addOpenTime
            if (index==0) {
                return moment(time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment(time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[2].startTime || time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeEnd(site, index) {
            let time=this.addData.addOpenTime;
            if (index==0) {
                return moment((time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment((time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return '23:59:59'// 时间段1的结束时间
            }
        },
        funTimeOne(time) {
            if (!time[0].startTime&&time[0].endTime) {
                this.$message('请选择时间段1的开始时间');
                return false;
            } 
            if (time[0].startTime&&!time[0].endTime) {
                this.$message('请选择时间段1的结束时间');
                return false;
            } 
            if (time[0].startTime&&time[0].endTime) {// 都有，判断是否结束>开始
                let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                let startTime=Date.parse(currentDate+moment(time[0].startTime).format('HH:mm'))// 
                let endTime=Date.parse(currentDate+moment(time[0].endTime).format('HH:mm'))// 
                if (startTime>=endTime) {
                    this.$message('时间段1的结束时间需要大于开始时间');
                    return false;
                }
            }
            return true
        },
        funTimeTwo(time) {
            this.funTimeOne(time);
            if (this.funTimeOne(time)==true) {
                if (!time[1].startTime&&time[1].endTime) {
                    this.$message('请选择时间段2的开始时间');
                    return false;
                } 
                if (time[1].startTime&&!time[1].endTime) {
                    this.$message('请选择时间段2的结束时间');
                    return false;
                } 
                if (time[1].startTime&&time[1].endTime) {// 都有，判断是否结束>开始
                    let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                    let startTime=Date.parse(currentDate+moment(time[1].startTime).format('HH:mm'))// 
                    let endTime=Date.parse(currentDate+moment(time[1].endTime).format('HH:mm'))// 
                    if (startTime>=endTime) {
                        this.$message('时间段2的结束时间需要大于开始时间');
                        return false;
                    }
                }
                //  第一时间段结束>第二的开始 
                let oneEnd=time[0].endTime;
                let twoStart=time[1].startTime;
                if (oneEnd&&twoStart) {
                    let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                    oneEnd=Date.parse(currentDate+moment(oneEnd).format('HH:mm'))// 
                    twoStart=Date.parse(currentDate+moment(twoStart).format('HH:mm'))// 
                    if (oneEnd>twoStart) {
                        this.$message('时间段2的开始时间需要大于时间段1的结束时间');
                        return false;
                    }
                }
            } else {
                return false
            }
            return true
        },

        funTimeThree(time) {
            this.funTimeOne(time);
            this.funTimeTwo(time);
            if (this.funTimeOne(time)==true&&this.funTimeTwo(time)==true) {
                if (!time[2].startTime&&time[2].endTime) {
                    this.$message('请选择时间段3的开始时间');
                    return false;
                }
                if (time[2].startTime&&!time[2].endTime) {
                    this.$message('请选择时间段3的结束时间');
                    return false;
                }
                if (time[2].startTime&&time[2].endTime) {
                    let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                    let startTime=Date.parse(currentDate+moment(time[2].startTime).format('HH:mm'))// 
                    let endTime=Date.parse(currentDate+moment(time[2].endTime).format('HH:mm'))// 
                    if (startTime>=endTime) {
                        this.$message('时间段3的结束时间需要大于开始时间');
                        return false;
                    }
                }
                // 第二的结束>第三的开始
                let twoEnd=time[1].endTime;
                let threeStart=time[2].startTime;
                if (twoEnd&&threeStart) {
                    let currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';// 当前年
                    twoEnd=Date.parse(currentDate+moment(twoEnd).format('HH:mm'))// 
                    threeStart=Date.parse(currentDate+moment(threeStart).format('HH:mm'))// 
                    if (twoEnd>threeStart) {
                        this.$message('时间段3的开始时间需要大于时间段2的结束时间');
                        return false;
                    }
                }
            } else {
                return false
            }
            return true
        },
       // 弹出框的关闭按钮
        handleClose(done) {
            this.$refs.addData.resetFields();
            this.delDialogAdd();
        },
        resetFormdelDialogAdd(addData) {
            this.$refs[addData].resetFields();
            this.delDialogAdd();
        },
        // 还原弹窗信息（addDate是接受的父组件，不可以addDate={}这样修改）
        delDialogAdd() {
            this.addData.dialogAdd=false;       
        }
       
    }
}
</script>
<style lang="scss" scoped>
.dialogPop {
    .dialog-title {
        font-size: 20px;
        text-align: center;
        line-height: 1;
        font-size: 16px;
        font-weight: 700;
        color: rgb(61, 41, 31);
        position: relative;
        top: -26px;
        width: -moz-calc(100% - 30px);
        width: -webkit-calc(100% - 30px);
        width: calc(100% - 30px);
    }
    .el-dialog__footer {
        .dialog-footer {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }
    }
    .chose {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        color:#ff5e2c;
    }
    .areaBoxcon{
       padding: 0px 0px 30px;
    }
    .addBtn{
        color:#ff5e2c;
        cursor: pointer;
          &:hover{
            color:rgb(255, 126, 86);
        }
        i{
           font-size: 10px;
         } 
    }
    .del-btn {
        display:inline-block;
        width:26px;
        position:absolute;
        right:-40px;
        top:0px;
        line-height: 36px;
        cursor: pointer;
        text-align: center;
    }
    .time-title{
        color:#333;
        font-size:14px;
        height: 38px;
        line-height:38px;
        margin-bottom:12px;
    }
}
</style>


